<template>
	<view class='device-index'>
		<view class="item-view" v-for="item in dataList">
			<!-- {{item.device_alias}} - {{item.device_no}} -->

			<view style="font-size: 12pt;font-weight: 600;">{{item.device_alias}}</view>
			
			<view style="font-size: 8pt;margin-bottom: 20rpx;">
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
					<view>设备号：{{item.device_no}}</view>
					<view>型号：{{item.net_type ? item.net_type :'未知'}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;align-items: center;">
					<view>{{formatTimeToStr(item.created_at)}}</view>
					<view v-if="item.is_default == 1" style="color: red;font-size: 10pt;display: flex;align-items: center;" @click="showToast('主账号/子账号未绑定任何指定设备时，默认使用该设备')">
						<span style="margin-right: 10rpx;">默认设备</span>
						<svg t="1725953621981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4470" width="24" height="24">
							<path d="M808.35715 213.332736c-164.707272-164.709319-432.683537-164.709319-597.333504 0-164.709319 164.649967-164.709319 432.624185 0 597.333504 164.649967 164.709319 432.626231 164.709319 597.333504 0C973.067492 645.956921 973.067492 377.982704 808.35715 213.332736zM765.48983 767.767198c-141.075039 141.077086-370.609783 141.077086-511.627517 0-141.078109-141.017734-141.078109-370.520755 0-511.596817 141.017734-141.017734 370.552477-141.077086 511.627517 0C906.506541 397.188114 906.506541 626.750487 765.48983 767.767198z" fill="#000000" p-id="4471"></path>
							<path d="M500.686838 686.040848c-20.432355 0.061398-37.063127 16.692171-37.063127 37.095873 0 20.458961 16.630772 37.090756 37.092803 37.090756 20.432355 0 37.066197-16.631796 37.066197-37.151132C537.781688 702.672644 521.147846 686.040848 500.686838 686.040848z" fill="#000000" p-id="4472"></path>
							<path d="M505.832022 265.144776c-72.362075 0-136.290059 41.640376-158.933779 103.683431-5.26491 14.508435-9.813506 38.620599-5.26491 58.753125 3.048429 13.81975 17.709337 22.974247 31.320333 19.863397 14.117532-3.171226 23.0029-17.23043 19.832697-31.290657-1.556449-7.210215-0.060375-20.132526 3.350304-29.435403 12.533454-34.342156 51.27378-69.043493 109.60735-69.043493 68.681242 0 116.635417 35.091216 116.635417 85.375459 0 37.572734-23.302729 51.1561-64.525596 72.034617-37.303604 18.847254-83.761706 42.241057-83.761706 101.289917L474.092134 629.981065c0 14.478759 11.784394 26.2652 26.204825 26.2652 14.449084 0 26.235524-11.786441 26.235524-26.2652l0-53.606919c0.060375-25.605168 18.936281-36.317137 55.042617-54.504358 41.6107-20.968567 93.421716-47.025013 93.421716-118.820176C674.997839 321.862545 605.418135 265.144776 505.832022 265.144776z" fill="#000000" p-id="4473"></path>
						</svg>	
					</view>
				</view>
			</view>
		
			<view style="display: flex;justify-content: space-around;padding-top: 30rpx;border-top: 1rpx solid #ccc;"> 
				<view class="ctr-button" @click="testDevice(item)">测试设备</view>
				<view class="ctr-button" @click="openForm(item)">修改</view>
				<view class="ctr-button" @click="removeDevice(item)">删除</view>
			</view>
		</view>
		
		<!--加载loadding-->
		<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
		<main-nomore :visible="!pullUpOn"></main-nomore>
		<!--加载loadding-->
		
		<com-modal :custom="true" :show="showModal" padding="0" @cancel="closeHandler">
			<view class="jx-modal-title" v-if="deviceForm.device_id > 0">修改设备信息</view>
			<view class="jx-modal-title" v-else>添加设备信息</view>
			<view>
				<view class="shopSetting-item">
					<view class="shopSetting-title">
						设备名
					</view>
					<view class="shopSetting-int">
						<input type="text" placeholder="请填写设备名称" v-model="deviceForm.device_alias"/>
					</view>
				</view>
				<view class="shopSetting-item">
					<view class="shopSetting-title">
						设备号
					</view>
					<view class="shopSetting-int">
						<input type="text" placeholder="请填写设备号" v-model="deviceForm.device_no"/>
					</view>
				</view>
				<view class="shopSetting-item">
					<view class="shopSetting-title">
						设备型号
					</view>
					<view class="shopSetting-int">
						<radio-group @change="radioChange" style="display: flex;">
							<label>
								<radio :checked="deviceForm.net_type == '4G'" value="4G" color="#fcc80e" style="transform:scale(0.8)"/><text>4G版</text>
							</label>
							<label>
								<radio :checked="deviceForm.net_type == 'WIFI'" value="WIFI" color="#fcc80e" style="transform:scale(0.8)"/><text>WIFI版</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="shopSetting-item">
					<view class="shopSetting-title">
						默认设备：
					</view>
					<view class="shopSetting-int" style="display: flex;align-items: center;">
						<switch :checked="deviceForm.is_default == 1" color="#fcc80e" @change="switchChange" style="transform:scale(0.7)" />
					</view>
				</view>
				<view style="margin-top: 20rpx;padding: 30rpx;">
					<button @click="storeData" style="background-color: #fcc80e;color: #fff;font-weight: 600;">保存</button>
				</view>
			</view>
			
		</com-modal>
	
		<view class='fixed-button' @click="showModal = true">
			<svg t="1725967221312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8376" width="32" height="32">
				<path d="M848 680v112h112v64H848v112h-64V856H672v-64h112V680h64zM736 88c70.692 0 128 57.308 128 128v400h-64V216c0-34.993-28.084-63.426-62.942-63.991L736 152H288c-34.993 0-63.426 28.084-63.991 62.942L224 216v481.124C242.829 686.234 264.687 680 288 680h320v64H288c-35.346 0-64 28.654-64 64 0 34.993 28.084 63.426 62.942 63.991L288 872h320v64H288c-70.692 0-128-57.308-128-128V216c0-70.692 57.308-128 128-128h448zM547 792v32h-70v-32h70z m-134 0v32h-70v-32h70z m157.358-516L506.85 385.999h121.984l-100.46 174h-73.899l63.508-110H396l36.416-63.075 0.001-0.924 0.533-0.001L496.458 276h73.9z" fill="#ffffff" p-id="8377"></path>
			</svg>
		</view>
	</view>

</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	import comModal from "@/components/com/com-modal/com-modal";
	
	export default{
		components:{
			comModal
		},
		data(){
			return {
				queryParams:{
					page:1,
					page_size:20
				},
				dataList:[],
				page_count:0,
				showModal:false,
				deviceForm:{
					device_id:0,
					device_alias:'',
					device_type:1,//设备类型。1-收款语音播报机
					device_no:'',
					net_type:'4G',
					is_default:0
				},
				loadding:false,
				pullUpOn:true
			}
		},
		onShow(){
			this.resetParamsAndDataList()
			this.getDataList()
		},
		methods:{
			showToast(content){
				uni.showModal({
					title:"温馨提示",
					content:content,
					showCancel:false,
					confirmText:'我知道了'
				})
			},
			async getDataList(){
				this.loadding = true;
				let res = await this.$http.request({
					url:this.$api.moreShop.MchDeviceList,
					method:'get',
					data:this.queryParams
				});
				this.loadding = false;
				if(res.code != 0 ){
					that.$http.toast(res.msg);return ;
				}
				this.page_count = res.data.pagination.page_count;
				this.dataList.push(...res.data.list);
			},
			resetParamsAndDataList(){
				this.queryParams = {
					page:1,
					page_size:20
				}
				this.dataList = [];
				this.page_count = 0;
			},
			switchChange(e){
				if(e.target.value){
					this.deviceForm.is_default = 1
				}else{
					this.deviceForm.is_default =  0
				}
			},
			radioChange(e){
				this.deviceForm.net_type = e.detail.value;
			},
			async storeData(){
				if(this.deviceForm.device_no == ''){
					this.$http.toast('设备号不能为空');return ;
				}
				uni.showLoading({mask:true});
				let res = await this.$http.request({
					url:this.$api.moreShop.DeviceCreateOrUpdate,
					method:'post',
					data:this.deviceForm
				});
				uni.hideLoading();
				if(res.code != 0){
					this.$http.toast(res.msg);return ;
				}
				this.$http.toast("操作成功");
				this.closeHandler();
				let self = this;
				setTimeout(function(){
					self.resetParamsAndDataList();
					self.getDataList()
				},1000)
				
			},
			openForm(row){
				Object.assign(this.deviceForm,row);
				// this.deviceForm = row;
				this.showModal = true;
			},
			closeHandler(){
				this.deviceForm ={
					device_id:0,
					device_alias:'',
					device_type:1,//设备类型。1-收款语音播报机
					device_no:'',
					net_type:'4G',
					is_default:0
				}
				this.showModal = false;
			},
			
			async testDevice(item){
				let res = await this.$http.request({
					url: this.$api.moreShop.MchDeviceTest,
					method:'post',
					data:{device_id:item.device_id},
					showLoading:true
				});
				if(res.code != 0){
					this.$http.toast(res.msg);
					return ;
				}
				this.showToast("播报消息已发送。如果设备仍然无法播报，请检查设备是否开机与联网！");
			},
			
			removeDevice(item){
				let self = this;
				uni.showModal({
					title:"温馨提示",
					cancelText:"我再想想",
					content:"删除设备前请先核实是否有账号绑定该设备，否则将导致绑定账号出现异常。",
					confirmText:"确定删除",
					success: async function (res) {
						if (res.confirm) {
							let response = await self.$http.request({
								url: self.$api.moreShop.MchDeviceRemove,
								method:'post',
								data:{device_id:item.device_id},
								showLoading:true
							});
							if(response.code != 0){
								self.$http.toast(response.msg);return ;
							}
							self.$http.toast('操作成功！');
							setTimeout(function(){
								self.resetParamsAndDataList();
								self.getDataList()
							},1000)
						}
					}
				})
			}
		},
		onReachBottom() {
			if (this.queryParams.page >= this.page_count) {
				this.pullUpOn = false;
				return;
			}
			this.pullUpOn = true;
			this.queryParams.page++;
			this.getDataList();
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000)
			}
		}
	}
</script>

<style lang="scss">
	.item-view{
		padding: 20rpx;
		background-color: #ffffff;
		margin-bottom: 10rpx;
		// margin: 20rpx 0;
	}
	.ctr-button{
		background-color: #fcc80e;
		color:#fff;
		padding: 6rpx 40rpx;
		border-radius: 6rpx;
	}
	.jx-modal-title {
		text-align: center;
		font-size: 34rpx;
		color: #333;
		padding-top: 20rpx;
		font-weight: bold;
	}
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.shopSetting-item {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid #888888;
		overflow: hidden;
		display: flex;
		justify-content: space-between
	}
	.shopSetting-title {
		height: 100rpx;
		line-height: 100rpx;
		margin-right: 20rpx;
		color: #000;
	}
	
	.shopSetting-int {
		height: 100rpx;
		display: flex;
	}
	.shopSetting-int text{display: block;height: 100rpx;line-height: 100rpx;
		overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
	}
	.shopSetting-int input {
		height: 100rpx;
		text-align: right;
	}
	
	.shopSetting-int label{
		width: 70px;
		display: flex;
		align-items: center;
		font-size: 8pt;
	}
	
	.fixed-button{
		position: fixed;
		right: 50rpx;
		top: 65vh;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #ffbc00;
		box-shadow: 2rpx 2rpx 5rpx 0 ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>